<template>
    <div class="divBox">
        <el-drawer
            :title="this.id > 0 ? '详情' : '新增'"
            :visible.sync="drawer"
            direction="rtl"
            :show-close="true"
            :wrapper-closable="true"
            :append-to-body="true"
            :wrapperClosable="false"
            :before-close="handleClose"
            :size="`85%`"
            >
      <!-- 组织架构页面 -->
      <el-card v-loading="cardloading">
        <el-row>
          <el-col v-bind="gridl" class="p20">
            <tree ref="eltree" :parent-tree="treeData" :disableds="disableds" :pagestatus="pagestatus" :frame_id="frame_id" @handlerTree="handlerTree" @DbhandlerTree="DbhandlerTree"  @getSearch="handleTree" />
          </el-col>
          <el-col v-bind="gridr" class="boder-left p20">
            <div class="table-box ml20">
                  <!-- 新增(新) -->
                <wlForm v-if="wlformShow" ref="addDrawernew" :disableds="disableds"  :formDataAll="formDataAll" :oneboom="oneboom" :flagStatu="flagStatu" :dangqianIndex='dangqianIndex' :childGyData="childGyData" :treeData="treeSelectData" :pagestatus="pagestatus" :keyName="keyName" @getList="getSubmitList"></wlForm>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-drawer>
    </div>
</template>

<script>
  import {
  crudModuleListApi,
  crudModuleInfoApi,
  crudModuleDelApi,
  crudModuleFindApi,
  crudFormMatenalListApi,
  crudModuleBatchDelApi,
  moduleTransferApi,
  moduleShareApi,
  delCancelShareApi } from '@/api/develop'
  import { getDictDatainfoApi, getDictDataListApi } from '@/api/form'
  import { EventBus } from '@/libs/bus'
  export default {
    components: {
      wlForm: ()=> import('../components/wlForm'),
      tree: () => import('../components/tree'),
    },
    props: {
      pagestatus: {
         type: Number,
         defaualt: 1,
      },
      id: {
        type: Number, 
        default: 0
      },
      zidianbaseData: {
         type: [ Object],
         default:()=>{
            return {}
         }
      }
    },
    watch: {
    
    },
    data() {
      return {
        treeData: [],
        treeSelectData: [],
        selectData: [],
        loading: false,
        tableData: [],
        frame_id: 0,
        num: 0,
        personConfig: {},
        total: 0,
        formData: {
          page: 1,
          limit: 15,
          name: ''
        },
        drawer: false,
        gridl: {
          xl: 7,
          lg: 7,
          md: 7,
          sm: 7,
          xs: 24
        },
        gridr: {
          xl: 17,
          lg: 17,
          md: 17,
          sm: 17,
          xs: 24
        },
        formleibie: {
           page: 1, 
           limit: 50,
           keyword_default:'',
        },
        keyName: '',
        info: {},
        isNumber: 0,
        wlformShow: false,
        cardloading: true,
        dangqianId: 0, // 当前选择的物料id
        dangqianIndex: 1, // 当前选择的物料索引级
        flagStatu: 0,
        wlqdObject: {
           beizhu:'',
           children:[],
           dahuodingliao: '',
           dahuoquedingriqi:'',
           fuwuliaobianmaid:'',
           id:'',
           is_share: false,
           jishu:'',
           label:'',
           labels:'',
           name:'',
           shiyongbumen:'',
           sunhao:'',
           sunhaodaima:'',
           sunhaoleixing:[],
           tiaoji:'',
           wuliaobianmaid:'',
           yangbandingliao:'',
           yangbanquedingriqi:'',
           yongliang:''
        },
        childGyData: {}, // 子工艺所有流程数据
        oneboom: {},
        disableds: false,
        formDataAll: [{
              name: '物料清单',
              value: 'wuliaoqingdanbiao',
              datadictname:'',
              tableHeader:[], // 表格头部信息
              tableData:[], // 当前表格数据
              allTableData: {}, // 所有表格数据
              deleteData:[], // 要删除的表格数据
              selectData:[], // 选中数据
              istable: true,
              datadictList: {},
              oldData: [], // 旧数据
              allgyData: [], // 工艺数据
              gy:{},
              subitem:[{
                  name:'添加',
                  icon: 'el-icon-plus',
                  index: 1,
                  value: 'add',
                  tablename:'wuliaoxinxi'
                },

                {
                  name:'删除',
                  icon: 'el-icon-delete',
                  index: 3,
                  value: 'delete'
                },
                ],
              search: { // 搜索
                  page: 1,
                  limit: 50,
                  keyword_default:'', //关键字搜索
              },
              form: { // 表单

              }
            },
            {
              name: '工艺流程',
              value: 'gongyi',
              datadictname:'',
              tableHeader:[], // 表格头部信息
              tableData:[], // 当前表格数据
              allTableData: {}, // 所有表格数据
              deleteData:[], // 要删除的表格数据
              selectData:[], // 选中数据
              oldData: [],
              istable: true,
              subitem:[{
                  name:'添加',
                  icon: 'el-icon-plus',
                  index: 1,
                  value: 'add',
                  tablename:''
                },{
                  name:'选择工艺',
                  icon: 'el-icon-plus',
                  index: 1,
                  value: 'add',
                  tablename:''
                },

                {
                  name:'删除',
                  icon: 'el-icon-delete',
                  index: 3,
                  value: 'delete'
                },{
                  name:'工艺流程图',
                  icon: 'el-icon-share',
                  index: 3,
                  value: 'liuchengtu'
                },
                ],
              search: { // 搜索
                  page: 1,
                  limit: 50,
                  is_field_all:'',
                  is_system: 1,
                  order_by:'',
                  scope_frame:'all',
                  show_search_type: '0',
                  view_search: [],
                  view_search_boolean: '',
                  wuliaodangan: ''
              },
              form: { // 表单

              }
            },
        ],
      }
    },
    beforeDestroy() {
      EventBus.$off('event-tree-grandchild', this.handleEvent)
    },
    watch: {
      // 监听 visible 变化，关闭时重置数据
      drawer(newVal) {
        if (!newVal) this.resetData();
      }
    },
    created() {
        
    },
    mounted() {
        EventBus.$on('event-tree-grandchild', this.handletreeEvent)
    },
    methods: {
        resetData(){
          this.$refs.addDrawernew.resethandler()
        },
        async openBox(id, data){
          this.oneqdid = id; //当前以及物料清单id
          this.dangqianId = id; // 当前物料清单id
          this.selectData = data; // 当前物料清单数据
          this.dangqianIndex = 1;
          this.oneboom = data // 获取当前物料档案id和版本号
          this.drawer = true;
          this.keyName = 'wuliaoqingdanbiao'
          let obj = {}, edata = []
          obj.item_depc = data.item_depc || ''; // 物料中文描述
          obj.item_sn = data.item_sn; // 物料编码
          obj.id =  data.id; // 物料id
          obj.children = []
          edata.push(obj)
          this.treeData = edata; // 当前物料档案下的物料清单
          this.disableds = this.oneboom.bomm_ap_flag ==1 ? true : false
          this.handlerWLQDApi(id)
        },
        // 物料清单列表数据
        async handlerWLQDApi(id, index=0){
            this.wlformShow = true;
            this.cardloading = true;
            const resdata = await crudFormMatenalListApi({wuliaobianmaid: id}, true)
            let tableList = resdata.data.list;
            let gongyiList = resdata.data.gy || [];
            let gyData = []
            for(let i in gongyiList){
                let childdata = gongyiList[i];
                if(childdata.length > 0){
                    let formlistnew = this.generateProcessFlowsnew(childdata);
                    let newdatas = []
                    for(let a=0;a<formlistnew.length;a++){
                        let data2 = formlistnew[a];
                        for(let j=0;j<data2.length;j++){ // 对数据进行处理
                          data2[j].bengongxu = await this.handlergongxuFilter(data2[j].bengongxuid) // 获取本工序名称
                          data2[j].daogongxu = await this.handlergongxuFilter(data2[j].daogongxuid) // 获取到工序名称
                          data2[j].peijianleixing = await this.handlerpenjianleixiFilter(data2[j].peijianleixing) // 获取配件类型名称
                          data2[j].daopeijianleixing = await this.handlerpenjianleixiFilter(data2[j].daopeijianleixing) // 获取到配件类型名称
                          newdatas.push(data2[j]);
                        }
                    }
                    gyData = gyData.concat(newdatas)
                }
            }
            this.childGyData.gydata = gyData; // 要比较的工艺数据
            this.childGyData.gy = gongyiList; // 当前工艺
            let newData = [];
            
            if(tableList.length > 0){
                for(let i=0;i< tableList.length;i++){
                    let obj = {}
                    obj = tableList[i].wuliaoqingdanbiao;
                    obj.unitName = tableList[i].wuliaoxinxi.unitName;
                    obj.bomm_ver = tableList[i].wuliaoxinxi.bomm_ver;
                    obj.wuliaoxinxiid = tableList[i].wuliaoxinxi.id
                    obj.wuliaoqingdanbiaoid =  tableList[i].wuliaoqingdanbiao.id;
                    tableList[i].wuliaoqingdanbiao.sunhaoleixing = this.handlerxiegang(tableList[i].wuliaoqingdanbiao.sunhaoleixing);
                    obj.children = []
                    let childrens = tableList[i].children || [];
                    if(childrens.length > 0){
                        for(let j=0; j < childrens.length; j++){
                            let objs = {}
                            objs = childrens[j].wuliaoqingdanbiao;
                            objs.unitName = childrens[j].wuliaoxinxi.unitName;
                            objs.bomm_ver = childrens[j].wuliaoxinxi.bomm_ver;
                            objs.wuliaoqingdanbiaoid =  childrens[j].wuliaoqingdanbiao.id;
                            objs.wuliaoxinxiid = childrens[j].wuliaoxinxi.id
                            childrens[j].wuliaoqingdanbiao.sunhaoleixing = this.handlerxiegang(childrens[j].wuliaoqingdanbiao.sunhaoleixing);
                            objs.children = []
                            obj.children.push(objs) 
                        }
                    }
                    newData.push(obj)
                }
                if(index==0){ // 第一次加载时，不触发抽屉事件
                    this.flagStatu = 0;
                    this.treeSelectData = newData; 
                    this.treeData[index].children = newData
                    this.$nextTick(() => {
                        this.$refs.addDrawernew.openBox(this.dangqianId, this.selectData, index, resdata.data.list)
                    })
                    let gongyiallData = []
                    for(let i=0;i<newData.length;i++){
                      let childdata = newData[i].children || [];
                      if(childdata.length > 0){
                          let id = newData[i].wuliaobianmaid;
                          let searchlist = {
                            is_field_all:'',
                            is_system:1,
                            limit: 100,
                            order_by:{},
                            page:1,
                            scope_frame:'all',
                            show_search_type:'0',
                            view_search: [],
                            view_search_boolean:'',
                            wuliaodangan: id,
                          }
                        let datas = await crudModuleListApi('gongyi', searchlist);
                        let obj = {
                          id: id,
                          data: datas.data.list
                        }
                        gongyiallData.push(obj)
                        this.gongyiallData = gongyiallData;
                        EventBus.$emit('event-tree-gongyi', gongyiallData)
                      }
                    }
                  
                }else{
                    this.flagStatu = 1;
                    this.treeSelectData = newData; 
                    // this.handletreeEvent(newData)
                    // this.treeData = this.reassignChildrenByLevel(this.treeData, this.dangqianIndex, newData);
                    // this.$refs.eltree.dbhandlerexpand(this.dangqianId);
                    let datachild = this.treeData[0]
                    const resultSuccess = this.findAndAddChildren(this.treeData, id, newData);
                    this.$nextTick(() => {
                        this.$refs.addDrawernew.openBox(this.dangqianId, this.selectData, index, resdata.data.list)
                    })
                }
            }else{
                this.treeSelectData = newData
                this.$nextTick(() => {
                    this.$refs.addDrawernew.openBox(this.dangqianId, this.selectData, index, resdata.data.list)
                })
            }
            
            this.cardloading = false;
        },
        findAndAddChildren(nodes, targetId, newChildren) {
          for (const node of nodes) {
            if (node.wuliaoxinxiid === targetId) {
              if (!node.children) {
                // 使用 $set 确保响应式
                this.$set(node, 'children', []);
              }
              node.children.push(...newChildren);
              return true;
            }
            if (node.children && node.children.length) {
              const found = this.findAndAddChildren(node.children, targetId, newChildren);
              if (found) return true;
            }
          }
          return false;
        },
        async handlergongxuFilter(id, index){
          if(id){
            let gongxudata = this.zidianbaseData.gongxushezi;
            for(let i=0;i<gongxudata.length;i++){
              if(id == gongxudata[i].id){
                  return gongxudata[i].zhongwenmiaoshu;
              }
            }
          }else{
            return ''
          }
      
        },
        async handlerpenjianleixiFilter(id){
          if(id){
            id =  id.replace(/\//g, '')
            let peijianleixingdata = this.zidianbaseData.peijianleixing;
            for(let i=0;i<peijianleixingdata.length;i++){
                if(id == peijianleixingdata[i].value){
                  return peijianleixingdata[i].name;
                }
            }
          }else{
            return ''
          }
        
        },
        // 对工艺数据进行分组，并为每个起始点生成流程数组
        generateProcessFlowsnew(processData) {
            // 1. 按 peijianxuhao 分组
            const stepsBySequence = {};
            processData.forEach(item => {
                const seq = item.peijianxuhao;
                if (!stepsBySequence[seq]) {
                stepsBySequence[seq] = [];
                }
                stepsBySequence[seq].push(item);
            });
            // 2. 检查是否有 peijianxuhao: 1 的记录
            if (!stepsBySequence[1] || stepsBySequence[1].length === 0) {
                return [];
            }
            // 3. 为每个 peijianxuhao: 1 的记录生成流程
            return stepsBySequence[1].map(startItem => {
                const flow = [startItem];
                let currentSeq = 1;
                // 4. 按顺序查找后续步骤
                while (true) {
                const nextSeq = currentSeq + 1;
                if (!stepsBySequence[nextSeq]) break; // 没有后续步骤了
                // 查找匹配的下一步骤
                const nextSteps = stepsBySequence[nextSeq];
                const nextItem = nextSteps.find(step => 
                    step.bengongxu === flow[flow.length - 1].daogongxu
                );
                if (!nextItem) break; // 找不到匹配的下一步骤
                flow.push(nextItem);
                currentSeq = nextSeq;
                }
                return flow;
            });
        },
        handletreeEvent(data, index=1){
          if(index==1){
            this.treeData = this.reassignChildrenByLevel(this.treeData, this.dangqianIndex, data);
            this.$refs.eltree.dbhandlerexpand(this.dangqianId);
          }else if(index==2){
            this.handlerWLQDApi(this.dangqianId, 0)
          }
        },
        reassignChildrenByLevel(nodes, targetLevel, newChildren, currentLevel = 0) {
            return nodes.map(node => {
                const newNode = { ...node };
                
                if (currentLevel === targetLevel - 1) {
                // 当前层级是目标层级的父级，重新赋值其 children
                newNode.children = newChildren;
                } else if (newNode.children && newNode.children.length > 0) {
                // 继续递归处理子级
                newNode.children = this.reassignChildrenByLevel(
                    newNode.children, 
                    targetLevel, 
                    newChildren, 
                    currentLevel + 1
                );
                }
                
                return newNode;
            })
        },
        // 获取路径路由名称(当前实体名称)
        handlerUrlName(){
            const routeString = this.$route.path
            const routeArray = routeString.split('/').filter((item) => item !== '')
            return routeArray[3]
        },
        // 搜索
        getSearch(val){
            this.formleibie.keyword_default = val;
            this.getList();
        },
        async handlerFindDetails(id, index=1){
            if(this.pagestatus == 2){ // 物料清单和工艺
                const data = await crudModuleFindApi(this.keyName, this.dangqianId)
            }else{
              this.wlformShow = true;
              const data = await crudModuleFindApi(this.keyName, id)
              this.$nextTick(() => {
                  this.$refs.addDrawernew.openBox(id, data.data)
              })
            }
        },
        getInfo() {
            crudModuleInfoApi(this.keyName, 0).then((res) => {
                this.info = res.data
            })
        },
        getSubmitList(index=0, status=1){
          //  console.log("保存：",index, status, this.dangqianId)
          //  if(status==2){
          //     this.handlerWLQDApi(this.dangqianId)
          //  }else{
          //     this.getList();
          //  }
            if(index == 13 || index == 12){ // 反批核-批核
                this.disableds = index == 12 ? true : false;
                this.oneboom.bomm_ap_flag = index == 12 ? 1 : 0;
                this.$emit("changeBom", 13)
            }else{
                this.resetData();
                this.dangqianIndex = 1;
                this.handlerWLQDApi(this.oneqdid)
            }
        },
        // 树形数据
        async getList(indexid=0) {
          this.treeData = []
          this.cardloading = true;
          // 物料清单
          this.wlqdObject.wuliaobianmaid = this.selectData.item_sn;
          this.wlqdObject.name = this.selectData.item_depc;
          this.wlqdObject.label = this.selectData.item_sn;
          let resultdata = []
          resultdata.push(this.wlqdObject);
          await this.handlerWuliaobianmaFun(resultdata);
          this.cardloading = false;     
        },
        async handlerWuliaobianmaFun(resultdata, childrens=[]){
            if(resultdata.length > 0){
                let resultdata2 = [], udata = []
                // 根据物料编码父id查询对应物料编码数据（父级）
                const result2 = await crudModuleListApi(this.keyName, {page: 1, limit: 50,  fuwuliaobianmaid: this.selectData.id})
                resultdata2 = result2.data.list;
                for(let a=0;a<resultdata.length;a++){
                // let lbname = this.extractedText(resultdata[a].fuwuliaoleibie)
                resultdata[a].name = this.selectData.item_depc || ''
                resultdata[a].labels = resultdata[a].fuwuliaobianmaid || ''; // 父物料编码
                resultdata[a].label = resultdata[a].wuliaobianmaid; // 物料编码
                resultdata[a].children = childrens
                if(resultdata2.length > 0){ // 子物料编码
                    for(let s=0;s<resultdata2.length;s++){
                    // let rdata = await crudModuleListApi('wuliaoxinxi', {page: 1, limit: 10,  item_sn: resultdata2[s].wuliaobianmaid})
                    // resultdata2[s].name = rdata.data.list[0].item_depc || '';
                    resultdata2[s].labels = resultdata2[s].fuwuliaobianmaid || ''; // 父物料编码
                    resultdata2[s].label = resultdata2[s].wuliaobianmaid; // 物料编码
                    //resultdata2[s].zhongwenmiaoshu = rdata.data.list[0].item_depc || '';
                    resultdata2[s].children = []
                    resultdata[a].children.push(resultdata2[s])
                    }
                }
                udata.push(resultdata[a])
                }

                this.treeData = udata;
                this.handlerFindDetails(this.dangqianId);
            }
        },
        // 升序排序函数
        sortedAsc(items, daima) {
            return [...items].sort((a, b) => 
            a.leibiedaima.localeCompare(b.leibiedaima)
            )
        },
        // 移除非中文字符函数
        removeNonChinese(str) {
            // 匹配所有非中文字符，并替换为空
            return str.replace(/[^\u4e00-\u9fa5\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2B73F}\u{2B740}-\u{2B81F}\u{2B820}-\u{2CEAF}\u{2CEB0}-\u{2EBEF}\u{30000}-\u{3134F}\u{F900}-\u{FAFF}]/gu, '');
        },
        // 截取最后一个横杠后的字符和空格前的内容
        extractedText(str) {
            if(str){
                if(str.includes('-')){
                // 找到最后一个横杠的位置
                const lastDashIndex = str.lastIndexOf('-')
                // 找到空格的位置
                const spaceIndex = str.indexOf(' ', lastDashIndex)
                // 截取最后一个横杠后到空格前的内容
                if (lastDashIndex !== -1 && spaceIndex !== -1) {
                    return str.substring(lastDashIndex + 1, spaceIndex)
                }
                // 如果没有空格，就取横杠后的所有内容
                else if (lastDashIndex !== -1) {
                    return str.substring(lastDashIndex + 1)
                }
                // 如果没有横杠，返回空字符串
                return ''
                }else{
                return str;
                }
            }else{
                return ''
            }
        },
        // 构建树形结构函数
        buildTreeWithMap(data, idKey = 'label', parentKey = 'labels', childrenKey = 'children') {
            const map = {}
            const tree = []
            // 首先构建一个映射表
            data.forEach(item => {
            map[item[idKey]] = { ...item, [childrenKey]: [] }
            })
            // 构建树形结构
            data.forEach(item => {
            const parent = map[item[parentKey]]
            if (parent) {
                parent[childrenKey].push(map[item[idKey]])
            } else if (item[parentKey] === null || item[parentKey] === '') {
                tree.push(map[item[idKey]])
            }
            })
            return tree
        },
        // tree 树形双击事件返回方法
        DbhandlerTree(item, dataobj){
            this.dangqianId = item.id;
            this.dangqianIndex = dataobj.level;
            this.selectData = item;
            if(dataobj.status){// 有子级数据
                this.treeSelectData = item.children;
                this.$nextTick(() => {
                    this.$refs.addDrawernew.openBox(item.id, item, dataobj.status, item.children)
                })
            }else{ // 没有子级数据进行调接口查询
                this.treeSelectData = []
                this.handlerWLQDApi(item.wuliaobianmaid, 2);
            }
        },
        // 选择树形数据或新增物料类别时，获取物料属性数据index值1添加2编辑3删除
        async handlerTree(item ='', index=1, dataobj='' ){
            if(index==1){ // 新增物料类别
                this.$nextTick(() => {
                    this.$refs.addDrawernew.openBox(0, '')
                })
            }else if(index==2){ // 编辑
               this.handlerFindDetails(item.id, index)
            }else if(index==3){ // 删除
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                crudModuleDelApi(this.keyName, item.id).then((deldata)=>{
                    if(deldata.status==200){
                    this.$message({ type: 'success', message: res.message })
                    }else{
                    this.$message({ type: 'error', message: res.message })
                    }
                }).catch((err)=>{
                    this.$message({ type: 'error', message: err.message })
                })
                }).catch((action) => {
                
                })
            }else if(index==11){ // 新增子类别时，获取物料属性数据index值11添加子类别的物料属性数据
                this.$nextTick(() => {
                    this.$refs.addDrawernew.openBox(0, item, 11)
                })
            } else if(index==6){ // 选择当前行
                this.dangqianId = item.id;
                this.dangqianIndex = dataobj.level;
                this.selectData = item;
                if(dataobj.status){
                    this.treeSelectData = item.children;
                    this.$nextTick(() => {
                        this.$refs.addDrawernew.openBox(item.id, item, dataobj.status, item.children)
                    })
                }
            
            }else{
            
            }
        },
        handlerxiegang(val, data){
          if(val){
            if(val.includes("/")){
              let newStr = val.replace(/\//g, "");
              if(data && data.length > 0){
                for(let i=0;i < data.length; i++){
                    if(data[i].value == newStr){
                        return data[i].name;
                    }
                }
              }else{
                  return newStr;
              }
            }else{
              let newStr = val
              if(data && data.length > 0){
                for(let i=0;i < data.length; i++){
                    if(data[i].value == newStr){
                        return data[i].name;

                    }
                }
              }
            }
          }
          return ''
        },
        handleClose(){
            this.drawer = false;
            this.selectData = {}
        },
        // 分页
        pageChange(page) {
            this.formData.page = page
            this.getTableList()
        },
        handleSizeChange(size) {
            this.formData.limit = size
            this.getTableList()
        },
        // 编辑用户
        onEdit(id) {
            this.userId = id
            this.$refs.editUser.open()
        },
        
        handleTree() {},
    
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .divBox {
    height: 100%;
  }
  .mt16 {
    margin-top: 7px;
  }
  .img {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 4px;
  }
  
  .prompt-bag {
    background-color: #edf5ff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #606266;
  }
  /deep/.el-button--small {
    font-size: 13px;
  }
  
  .el-icon-question {
    cursor: pointer;
    color: #1890ff;
    font-size: 15px;
  }
  /deep/ .el-card__body {
    padding: 0 20px;
  }
  .iconzhuyaobumen {
    color: #ff9900;
  }
  .boder-left {
    min-height: calc(100vh - 77px);
    border-left: 1px solid #eeeeee;
  }
  .p20 {
    padding: 20px 0;
  }
  
  .table-container {
    margin-top: 10px;
  }
  
  .frame-name {
    .iconfont {
      padding-right: 6px;
    }
  }
  .icon-h {
    position: relative;
    & > span {
      color: #1890ff;
    }
    .guan {
      color: #ff9900;
    }
  }
  .icon {
    position: absolute;
    top: 0;
    right: -15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 15px;
    color: #fff;
    border-radius: 50%;
    background-color: #ff9900;
  }
  /deep/.select-bar {
    line-height: 32px;
  }
  </style>
  <style>
  .monitor-yt-popover {
    background: #edf5ff;
    border: 1px solid #97c3ff;
    padding: 13px 15px 6px 15px;
  }
  </style>
  